<template>
  <view>
    <view class="heloModule">
      <view
        class="list"
        v-for="(item, index, key) in list"
        :key="key"
        @click="openChange(index)"
      >
        <view class="block1 flex aitems between">
          <view class="info1 c1F1F1F f32">
            {{ item.title }}
          </view>
          <image
            src="@/static/img15.png"
            :class="item.isOpen ? 'icon rotate' : 'icon'"
            mode=""
          ></image>
        </view>
        <view class="block2 c1F1F1F f26" v-if="item.isOpen">
          <u-parse :content="item.content"></u-parse>
        </view>
      </view>
    </view>
    <nodata v-if="list.length == 0" />
    <view class="" style="height: 100rpx"> </view>
  </view>
</template>

<script>
import { helpList } from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { loading, go } from "@/utils/wxAPI";
import { getToken } from "../../utils/storage";
export default {
  data() {
    return {
      loadingPage: false,
      list: [],
    };
  },
  async onLoad(options) {
    if (getToken()) {
      this.helpList();
    }
  },
  methods: {
    async helpList() {
      loading();
      let { data } = await helpList({
        code: "help",
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data;
        list.map((item) => {
          item.isOpen = false;
        });
        this.list = list;
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },

    gourl(url) {
      go(url);
    },

    openChange(index) {
      this.list[index].isOpen = !this.list[index].isOpen;
    },
  },
  onReachBottom() {},
  onPullDownRefresh() {
    this.helpList();
  },
};
</script>

<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.heloModule {
  background: #fff;
  border-radius: 28rpx;
  padding: 40rpx 30rpx 1rpx 30rpx;
  margin: 30rpx 30rpx 0;

  .list {
    margin: 0 0 40rpx 0;

    .block1 {
      .info1 {
      }

      .icon {
        width: 32rpx;
        height: 32rpx;
        transition: all 0.3s;
      }

      .rotate {
        transform: rotate(90deg);
      }
    }

    .block2 {
      margin: 30rpx 0 0;
      border-radius: 24rpx;
      background: #f7f8fa;
      padding: 28rpx;
      white-space: break-spaces;
    }
  }
}
</style>
